Website and Motion Graphics

What-O-Saur

Educating through the eyes of a child

What-O-Saur is a website optimized for only desktops and laptops that teaches children about dinosaur classifications and orders through animation.

View Website

Skills

Illustration
Animation
Copywriting
UX/UI Design
HTML
CSS
Javascript

the challenge

Igniting and sustaining curiosity and creativity in children

Spark, sustain, and cultivate curiosity in children aged 5–7 in an informational website about different dinosaur classifications and orders.

the outcome

Dinos with personality

What-o-Saur creates a visually stimulating experience through custom illustrations, animations, buttons, and sounds. The first-person narrative allows for personalized copywriting while effectively communicating facts about each dinosaur.

Design System

Typographic Scale

This is my h1

This is my h2

This is my h3

This is my body copy. I put an emphasis on the important features that I want people to know about each dinosaur. I kept my body copy short so it will still grab the attention of my audience.

Color Study dino colors

Wireframe

In my first iteration of wireframes, I intended for the site to consist of long, scrolling-pages dedicated to each respective suborder of dinosaurs and their facts.

Upon further research, most children’s websites that contained multiple long, scrolling-pages either had a disproportionate amount of copywriting or images. Popular informational websites for children contained mostly full-screen pages with buttons and animations to navigate around the site. I chose to change my wireframe to the latter to elevate the user experience for the site.

Artwork

Sketches

Illustrator

I intended these characters to be approachable and friendly while not overly exaggerating the iconic features of the dinosaurs. This art style was chosen to create a welcoming environment for children while setting the ground to design expressive animations.

After effects

I made it a point to animate each image in the website—through motion graphics or code—to capture and hold viewer attention through visual stimuli. The animations are short to keep the audience engaged while displaying pertinent information about the dinosaur.

Animations